VUE3（二十四）自定义alert弹窗组件

2024-06-09 06:37| 来源: 网络整理| 查看: 265

我这里自定义了几个alert弹窗组件：

1：带有确定取消的alert弹窗组件：效果如下图所示

在这里插入图片描述

代码：

/** * 自定义公共函数 */ const utils = { /** * @name: 自定义alert(确定，取消) * @author: camellia * @email: [email protected] * @date: 2021-01-23 * @param: data string 显示的文字 * @param: callbackTure function 点击确定回调函数 * @param: callbackFalse function 点击取消回调函数 */ alert(data: any, callbackTure: any = '', callbackFalse:any = '') { var alert_bg = document.createElement('div'); var alert_box = document.createElement('div'); var alert_text = document.createElement('div'); var alert_btn_true = document.createElement('div'); var alert_btn_false = document.createElement('div'); var textNode = document.createTextNode(data ? data : '') var btnText_false = document.createTextNode('取消'); var btnText_true = document.createTextNode('确定'); // 控制背景样式 utils.setCss(alert_bg, { 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0', 'background-color': 'rgba(0, 0, 0, 0.1)', 'z-index': '999999999' }); // 控制提示框样式 utils.setCss(alert_box, { 'width': '350px', 'max-width': '90%', 'font-size': '18px', 'text-align': 'center', 'background-color': '#fff', 'border-radius': '15px', 'position': 'absolute', 'top': '40%', 'left': '50%', 'transform': 'translate(-50%, -50%)' }); // 控制提示字体样式 utils.setCss(alert_text, { 'padding': '32px 15px', 'border-bottom': '1px solid #ddd' }); // 控制确定按钮样式 utils.setCss(alert_btn_true, { 'padding': '10px 0', 'color': '#007aff', 'font-weight': '600', 'cursor': 'pointer', 'float':'right', 'text-align': 'center', 'width': '49%', }); // 控制取消按钮样式 utils.setCss(alert_btn_false, { 'padding': '10px 0', 'color': '#007aff', 'font-weight': '600', 'cursor': 'pointer', 'float': 'right', 'text-align': 'center', 'width': '50%', 'border-right': '1px solid #CCC', }); // 内部结构套入 alert_text.appendChild(textNode); alert_btn_true.appendChild(btnText_true); alert_btn_false.appendChild(btnText_false); alert_box.appendChild(alert_text); alert_box.appendChild(alert_btn_true); alert_box.appendChild(alert_btn_false); alert_bg.appendChild(alert_box); // 整体显示到页面内 document.getElementsByTagName('body')[0].appendChild(alert_bg); // 确定按钮绑定点击事件 alert_btn_true.onclick = function () { // alert_bg.parentNode.removeChild(alert_bg); if (typeof callbackTure === 'function') { callbackTure(); //回调 } utils.setCss(alert_bg, { 'display': 'none' }); } // 取消按钮绑定点击事件 alert_btn_false.onclick = function () { if (typeof callbackFalse === 'function') { callbackFalse(); //回调 } else if (typeof callbackTure === 'function') { callbackTure(); //回调 } utils.setCss(alert_bg, { 'display': 'none' }); } }, /** * @name: 自定义alert添加css * @author: camellia * @email: [email protected] * @date: 2021-01-23 */ setCss(targetObj:any, cssObj:any) { var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : ''; for (var i in cssObj) { str += i + ':' + cssObj[i] + ';'; } targetObj.style.cssText = str; }, }

调用示例：

utils . alertLoadExec ( false ); 2：自定义alert，在自定义时间消失（仿layer），效果如下图所示：

在这里插入图片描述

代码：

/** * 自定义公共函数 */ const utils = { /** * @name: 自定义alert，在自定义时间消失 * @author: camellia * @email: [email protected] * @date: 2021-01-23 * @param: data string 显示的文字 * @param: callbackTure function 点击确定回调函数 * @param: time number 显示时间 */ alertMsg(time: number, data: any = '', callbackTure: any = '') { var alert_bg = document.createElement('div'); var alert_box = document.createElement('div'); var alert_text = document.createElement('div'); var textNode = document.createTextNode(data ? data : '') // 控制背景样式 utils.setCss(alert_bg, { 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0', 'z-index': '999999999' }); // 控制提示框样式 utils.setCss(alert_box, { 'width': '100%', 'max-width': '90%', 'font-size': '18px', 'text-align': 'center', 'border-radius': '15px', 'position': 'absolute', 'top': '40%', 'left': '50%', 'transform': 'translate(-50%, -50%)' }); if (data) { // 控制提示字体样式 utils.setCss(alert_text, { 'width': '350px', 'border-bottom': '1px solid #ddd', 'padding': '16px 10px', 'color': 'white', 'background-color': 'rgba(0, 0, 0, 0.7)', 'opacity': 1, 'border-radius': '4px', 'margin': 'auto', }); } else { // 控制load图片显示样式 utils.setCss(alert_text, { 'width': '100px', 'height':'100px', 'background':' url("/src/assets/img/loading-0.gif") no-repeat center', 'margin':'auto' }); } // 内部结构套入 alert_text.appendChild(textNode); alert_box.appendChild(alert_text); alert_bg.appendChild(alert_box); // 整体显示到页面内 document.getElementsByTagName('body')[0].appendChild(alert_bg); setTimeout(function () { if (typeof callbackTure === 'function') { callbackTure(); //回调 } // 弹窗消失~ utils.setCss(alert_bg, { 'display': 'none' }); }, time); }, /** * @name: 自定义alert添加css * @author: camellia * @email: [email protected] * @date: 2021-01-23 */ setCss(targetObj:any, cssObj:any) { var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : ''; for (var i in cssObj) { str += i + ':' + cssObj[i] + ';'; } targetObj.style.cssText = str; }, }

调用实例：

utils . alertMsg ( 2000 , ' 发送消息不能为空！ ' ); 3：自定义loading，在需要让他消失的时候让其消失。

这个函数功能稍微有一丢丢复杂，我这里大概说一下，大概就是，在发送请求前显示loading，服务器返回数据之后，loading消失。就是这样一个小功能。

效果如下图所示：

在这里插入图片描述

我这里定义了一个全局变量，来存储loading的dom节点。

/** * 自定义公共函数 */ const utils = { /** * @name: 下方自定义loading使用节点 * @author: camellia * @email: [email protected] * @date: 2021-02-22 21:28:32 */ element : '', /** * @name: 执行显示loading（提示词） * @author: camellia * @email: [email protected] * @date: 2021-02-22 21:32:27 * @param: sign boolean true:显示，false：删除 * @param: msg string 提示词 */ alertLoadExec(sign:any,msg:any='') { if(sign) { utils.element = utils.alertLoading(true, msg); } else { if (utils.element) { utils.alertLoading(utils.element); } } }, /** * @name: 自定义loading，true/false * @author: camellia * @email: [email protected] * @date: 2021-01-23 * @param: sign boolean true:显示，false：删除 * @param: msg string 提示词 */ alertLoading(sign:any,msg:any='') { if (sign === true) { var alert_bg = document.createElement('div'); var alert_box = document.createElement('div'); var alert_text = document.createElement('div'); var textNode = document.createTextNode(msg ? msg : '') // 控制背景样式 utils.setCss(alert_bg, { 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0', 'z-index': '999999999' }); // 控制提示框样式 utils.setCss(alert_box, { 'width': '100%', 'max-width': '90%', 'font-size': '18px', 'text-align': 'center', 'border-radius': '15px', 'position': 'absolute', 'top': '40%', 'left': '50%', 'transform': 'translate(-50%, -50%)' }); if (msg) { // 控制提示字体样式 utils.setCss(alert_text, { 'width': '350px', 'border-bottom': '1px solid #ddd', 'padding': '16px 10px', 'color': 'white', 'background-color': 'rgba(0, 0, 0, 0.7)', 'opacity': 1, 'border-radius': '4px', 'margin': 'auto', }); } else { // 控制load图片显示样式 utils.setCss(alert_text, { 'width': '100px', 'height': '100px', 'background': ' url("/src/assets/img/loading-0.gif") no-repeat center', 'margin': 'auto' }); } // 内部结构套入 alert_text.appendChild(textNode); alert_box.appendChild(alert_text); alert_bg.appendChild(alert_box); // 整体显示到页面内 document.getElementsByTagName('body')[0].appendChild(alert_bg); return alert_bg; } else { // for(var i = 0; i< sign.length;i++) // { // var _parentElement = sign[i].parentNode; var _parentElement = sign.parentNode; if (_parentElement) { _parentElement.removeChild(sign); } // } } }, /** * @name: 自定义alert添加css * @author: camellia * @email: [email protected] * @date: 2021-01-23 */ setCss(targetObj:any, cssObj:any) { var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : ''; for (var i in cssObj) { str += i + ':' + cssObj[i] + ';'; } targetObj.style.cssText = str; }, }

调用实例：

// 开启自定义loading utils.alertLoadExec(true); // 关闭自定义loading utils.alertLoadExec(false);

以上就是我自定义的几个alert显示样式，

都是根据需求自己想的招，大概都是野路子。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客 https://guanchao.site

欢迎访问小程序：

在这里插入图片描述

【本文地址】

公司简介

联系我们